<template>
    <view class="page">
        <nav-bar :background="'#0042b8'" :is-back="true" title="测试"></nav-bar>
        <view style="height: 80rpx;"></view>
        
        <navigator class="buttons" url="/pages/my/watercamera/index"><button type="primary">打开水印相机</button></navigator>
        <view style="height: 80rpx;"></view>
        
        <view>拍摄结果预览图，见下方</view>
        <view class="img-list">
            <view class="img-item" v-for="(item,index) in imgList" :key="index" @click="lookImg(index)">
                <image :src="item"></image>
            </view>
        </view>
        <canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d" :style="{width: canvasSiz.width+'px',height: canvasSiz.height+'px',position: 'absolute',left:'-500000px',top: '-500000px'}" />
    </view>
</template>
 
<script>
    var _this;
export default {
    data() {
        return {
            windowWidth:'',
            windowHeight:'',
            imagesrc: null,
            imgList:[],
            canvasSiz:{
                width:188,
                height:273
            }
        };
    },
    onLoad() {
        _this= this;
        this.init();
    },
    methods: {
        //添加照片水印
        watermark(info){
            // console.log("获取到的数据为",info)
            uni.getImageInfo({
                src: info.path,
                success: function(image) {
                    // console.log(image);
                    _this.canvasSiz.width =image.width;
                    _this.canvasSiz.height =image.height;
                    let maxWidth = image.width - 60; 
                    // console.log("获取最大宽度",maxWidth)
                    //担心尺寸重置后还没生效，故做延迟
                    setTimeout(()=>{
                        let ctx = uni.createCanvasContext('canvas-clipper', _this);
                        
                        ctx.drawImage(
                            info.path,
                            0,
                            0,
                            image.width,
                            image.height
                        );
                        
                        //具体位置如需和相机页面上一致还需另外做计算，此处仅做大致演示
                        ctx.setFillStyle('white');
                        // ctx.setFontSize(80);
						ctx.font = '100px bold'
                        ctx.fillText(info.info.hourtime, 20, _this.canvasSiz.height-120);
						// 黄色竖线
						ctx.moveTo(300,_this.canvasSiz.height-120);
						ctx.lineTo(300,_this.canvasSiz.height-200);
						ctx.setLineWidth(8)
						ctx.setStrokeStyle("#FBC339")
						ctx.stroke();
						//再来加个时间水印
						ctx.font = '42px bold'
						ctx.fillText(info.info.datetime, 330, _this.canvasSiz.height-170);
						//再来加个星期水印
						ctx.font = '42px bold'
						ctx.fillText(info.info.week, 330, _this.canvasSiz.height-120);
						// 地址
                        ctx.font = '40px bold'
                        let previousRowHeight =  _this.textPrewrap(ctx,info.info.address,20,_this.canvasSiz.height-50,70,maxWidth,3);

                        ctx.draw(false, () => {
                            uni.canvasToTempFilePath(
                                {
                                    destWidth: image.width,
                                    destHeight: image.height,
                                    canvasId: 'canvas-clipper',
                                    fileType: 'jpg',
                                    success: function(res) {
                                        _this.savePhoto(res.tempFilePath);
                                    }
                                },
                                _this
                            );
                        });
                    },500)
                    
                    
                }
            });
        },
        /**
        ctx： 画布的上下文环境
        content： 需要绘制的文本内容
        drawX： 绘制文本的x坐标
        drawY： 绘制文本的y坐标
        lineHeight：文本之间的行高
        lineMaxWidth：每行文本的最大宽度
        lineNum：最多绘制的行数
        */
        textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
            var drawTxt = ''; // 当前绘制的内容
            var drawLine = 1; // 第几行开始绘制
            var drawIndex = 0; // 当前绘制内容的索引
            // 判断内容是否可以一行绘制完毕
            if (ctx.measureText(content).width <= lineMaxWidth) {
                ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
            } else {
                    for (var i = 0; i < content.length; i++) {
                    drawTxt += content[i];
                    if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
                        if (drawLine >= lineNum) {
                            ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
                            break;
                        } else {
                            ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
                            drawIndex = i + 1;
                            drawLine += 1;
                            drawY += lineHeight;
                            drawTxt = '';
                        }
                    } else {
                        // 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
                        if (i === content.length - 1) {
                            ctx.fillText(content.substring(drawIndex), drawX, drawY);
                            return drawY;
                            // console.log("最后高度为",drawY);
                        }
                    }
                }
            }
        },
        //保存图片到相册，方便核查
        savePhoto(path){
            this.imgList.push(path)
            // this.imagesrc = path;
            //保存到相册
            uni.saveImageToPhotosAlbum({
                filePath: path,
                success: () => {
                    uni.showToast({
                        title: '已保存至相册',
                        duration: 2000
                    });
                }
            });
        },
        lookImg(index){
            // 预览图片
            uni.previewImage({
                current:index,
                urls: this.imgList,
            });
        },
        //初始化
        init(){
            let _this = this;
            uni.getSystemInfo({
                success: function(res) {
                    _this.windowWidth = res.windowWidth;
                    _this.windowHeight = res.windowHeight;
                }
            });
        }
        
    }
};
</script>
 
<style lang="less">
.page {
    width: 750rpx; 
    justify-content: center;
    align-items: center;
    flex-direction:column;
    display: flex;
    .buttons {
        width: 600rpx;
    }
}
.img-list{
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.img-item{
    width: 100rpx;
    height: 100rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    
}
.img-item image{
    width: 100%;
    height: 100%;
}
 
</style>